<template>
  <Card v-if="task" class="comp-taskitem" dis-hover>
    <Row>
      <Col span="12">
      <List>
        <ListItem>
          <span class="list-title">{{$t('page.schedule.schtb.name')}}:</span>
          <TextTooltip :width="itemWidth" :text="task.schedule" :tip="task.schedule+'\n'+task.no" />
        </ListItem>
        <ListItem>
          <span class="list-title">{{$t('page.schedule.schtb.task')}}:</span>
          <TextTooltip :width="itemWidth" :tip="task.task" />
        </ListItem>
        <ListItem>
          <span class="list-title">{{$t('page.schedule.tasktb.status')}}:</span>
          <span :width="itemWidth">
            <Tag :color="task.statustag">{{$t('page.schedule.taskstatus.'+task.status)}}</Tag>
          </span>
        </ListItem>
        <ListItem>
          <span class="list-title">{{$t('page.schedule.tasktb.type')}}:</span>
          <span :width="itemWidth">
            <Tag :color="task.typetag">{{!task.isOver?'-':$t('page.schedule.tasktype.'+task.type)}}</Tag>
          </span>
        </ListItem>
      </List>
      </Col>
      <Col span="12">
      <List>
        <ListItem>
          <span class="list-title">{{$t('page.schedule.taskdetail.realTime')}}:</span>
          <TextTooltip :width="itemWidth" :tip="!task.isOver?'-':(task.startTime+'\n'+(task.finishTime||'-'))" :text="(task.costTime||'-')+'ms'" />
        </ListItem>
        <ListItem>
          <span class="list-title">{{$t('page.schedule.tasktb.node')}}:</span>
          <TextTooltip :width="itemWidth" :tip="!task.isOver?'-':(task.appname + '(' + task.host + ':' + task.port + ')')" />
        </ListItem>
        <ListItem>
          <span class="list-title">{{$t('page.schedule.view.params')}}:</span>
          <TextTooltip :width="itemWidth" :tip="task.params||'-'" />
        </ListItem>
        <ListItem>
          <span class="list-title">{{$t('page.schedule.taskdetail.result')}}:</span>
          <TextTooltip :width="itemWidth" :tip="task.result||'-'" />
        </ListItem>
      </List>
      </Col>
    </Row>
  </Card>
</template>
<script>
  import TextTooltip from '@/components/texttooltip'
  export default {
    name: 'comp-taskitem',
    components: { TextTooltip },
    props: {
      task: [String, Object]
    },
    data() {
      return {
        itemWidth: 300
      }
    }
  }
</script>
<style>
  .comp-taskitem .list-title {
    width: 100px;
    font-weight: 600;
  }

  .comp-taskitem .ivu-tag {
    height: 20px;
    line-height: 20px;
    margin: 0;
  }

  .comp-taskitem .ivu-tooltip {
    height: 21px;
  }

  .comp-taskitem .ivu-tooltip-rel {
    display: inline-block;
    padding-right: 10px;
    width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
